import React, { Component} from 'react'
import { connect} from 'react-redux'
import cookie from 'js-cookie'


import {Result, List, WhiteSpace, Button, Modal} from 'antd-mobile'

//这里引入 初始化状态的方法
// import { loginHome} from '../../redux/actions'

const Item = List.Item
const Brief = Item.Brief

const alert = Modal.alert

class Personl extends Component{


    //组件移除之前把reducer的状态初始化
    componentWillUnmount(){
        //退出退出之前  不能在这里执行 因为 此时 每次路由的切换 也会执行..
        // console.log('死亡')
    }


    //这里要有一个处理退出的 函数这里的函数 即删除 cookie和 reducer的状态为初始值
    logout = () => {

        //此时 这里 可以确认退出了才能 清除状态
        //这里我已经在推出的时候已经强制刷新 因此这里不需要在重置页面
        //this.props.loginHome()
        //删除 cookie中的iuserid  调用remove()方法
        cookie.remove('userid')

        window.location.reload(true)
    }

    render(){
        const { username, header, post, info, company, salary} = this.props.user
        return(
        <div style={{marginBottom:70}}>
            <Result
                className='navPersonal'
                img={<img src={require(`../../assets/images/${header}.png`)} alt={header}/>}
                title={ username}
                message={ company}
                >
            </Result>
            <List renderHeader={() => '相关信息'}>
                <Item multipleLine>
                    <Brief>职位：{post}</Brief>
                    {
                        company?<Brief>公司：{company}</Brief>:null
                    }
                    {
                        salary?<Brief>薪资：{salary}</Brief>:null
                    }
                    <Brief>职位要求：{info}</Brief>
                </Item>
            </List>
            <WhiteSpace size='lg' />
            <Button type="warning" onClick={ () => {
                alert('退出', '确认退出？', [
                    {text:'取消'},
                    {text:'确定', onPress: () =>{
                            this.logout()
                        }}
                     ])
                 }
                }
            >
                退出登陆</Button>
        </div>
        )
    }
}

export default connect(
    state => ({user:state.user}),
    {}
)(Personl)